<!--
*@Author: QWP
*@Description: 危化预警  —— 预警企业
*@Date 2024-10-25 13:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white" >
    <u-table-header v-if="!orgId">
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            <!-- <u-icon-button itype="export" @click="exportBtn">导出</u-icon-button> -->
          </a-space>
        </a-col>
        <template #warnStartDateTimeBegin="{ componentProps }">
          <a-row class="f-w-100" style="align-items: center;">
            <a-col flex="1">
              <a-date-picker v-model:value="searchF.model.warnStartDateTimeBegin" 
                v-bind="componentProps"
                :disabled-date="(current) => disabledDateC(current, searchF.model.warnStartDateTimeEnd, 'after')"
                @change="getSearch(1)">
              </a-date-picker>
            </a-col>
            <span class="f-padding-rl5">至</span>
            <a-col flex="1">
              <a-form-item-rest>
                <a-date-picker v-model:value="searchF.model.warnStartDateTimeEnd" 
                  v-bind="componentProps"
                  :disabled-date="(current) => disabledDateC(current, searchF.model.warnStartDateTimeBegin, 'before')"
                  @change="getSearch(1)">
                </a-date-picker>
              </a-form-item-rest>
            </a-col>
          </a-row>
        </template>
        <template #warnEndDateTimeBegin="{ componentProps }">
          <a-row class="f-w-100" style="align-items: center;">
            <a-col flex="1">
              <a-date-picker v-model:value="searchF.model.warnEndDateTimeBegin" 
                v-bind="componentProps"
                :disabled-date="(current) => disabledDateC(current, searchF.model.warnEndDateTimeEnd, 'after')"
                @change="getSearch(1)">
              </a-date-picker>
            </a-col>
            <span class="f-padding-rl5">至</span>
            <a-col flex="1">
              <a-form-item-rest>
                <a-date-picker v-model:value="searchF.model.warnEndDateTimeEnd" 
                  v-bind="componentProps"
                  :disabled-date="(current) => disabledDateC(current, searchF.model.warnEndDateTimeBegin, 'before')"
                  @change="getSearch(1)">
                </a-date-picker>
              </a-form-item-rest>
            </a-col>
          </a-row>
        </template>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :loading="loading"
        :scroll="{ y: useTableScroll() }"
        :rowSelection="null"
        @onSelect="({ selectedRows }) => tabSelData = selectedRows"
        @onDblclick="(record) => {
          currentRow = record;
          showDispose = true
        }"
        @change="getSearch"></u-table>
    </u-table-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, h, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore } from '@/store'
import { _IFormEl } from "@/components/common/form/interface";
import { FormItemProps, TableColumnProps } from "ant-design-vue";
import { _IExtra } from '@/src/components/common/form/interface';
import { formatEnum } from '@/util/format.ts'
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { useTableScroll } from '@/hooks/useTable'
import * as endangerWarningApi from '@/service/emergency/endanger'

// 企业查看风险详情
const props = defineProps<{
  orgId?: string, // 企业id
}>()

dayjs.extend(utc);
const baseStore = useBaseStore()
const route = useRoute();
const router = useRouter();

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    keywords: null
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '72px',
  style: { width: '250px' }
};
const searchEl: Array<_IFormEl> = [
  { label: "预警时间", key: "warnStartDateTimeBegin", element: "slot", 
    formItemProps: { 
      ...formItemProps, 
      style: { width: '380px' }
    },
    componentProps: {
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DDTHH:mm:ss.sssZ',
    }
  },
  { label: "消警时间", key: "warnEndDateTimeBegin", element: "slot", 
    formItemProps: { 
      ...formItemProps, 
      labelWidth: '100px',
      style: { width: '380px' }
    },
  },
  { label: "系统编码", key: "systemCode", element: "select", formItemProps: formItemProps,
    componentProps: {
     options: baseStore.storeWarningSysCode
    }
  },
  { label: "模糊查询", key: "keywords", element: "input", formItemProps: formItemProps,
    componentProps: { placeholder: '请输入企业名称' }
  },
];

// 列表
const currentRow = ref({})
const loading = ref<boolean>(false)
const tabSelData = ref<any[]>([])
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "ROW_ID", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  ...(props.orgId ? [] : [{ dataIndex: "orgName", title: "企业名称", width: 180,}]),
  { dataIndex: "systemCode", title: "系统编码", width: 150, align: 'center',
    customRender: ({ text }) => formatEnum(text, baseStore.storeWarningSysCode)
  },
  { dataIndex: "warnType", title: "预警类型", width: 90, align: 'center' },
  { dataIndex: "warnStartDateTime", title: "预警时间", width: 110, align: 'center',
    customRender: ({ text }) => text ? dayjs.utc(text).format('YYYY-MM-DD HH:mm:ss') : ''
  },
  { dataIndex: "warnEndDateTime", title: "消警时间", width: 110, align: 'center',
    customRender: ({ text }) => text ? dayjs.utc(text).format('YYYY-MM-DD HH:mm:ss') : ''
  },
  // { dataIndex: "warnDimension", title: "预警维度", width: 150 },
  { dataIndex: "warnDescribe", title: "预警描述", width: 250 }
  // { dataIndex: "riskLevel", title: "预警等级", width: 150, align: 'center',
  //   customRender: ({text}) => {
  //     return formatWarnLevel(text)
  //   }
  // },
]);

onMounted(() => {
  getSearch()
})

// 列表查询
const getSearch = async(current?: number) => {
  loading.value = true;
  try {
    if(current == 1) {
      pagenation.current = 1;
    }
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    if(props.orgId) {
      searchF.model.orgId = props.orgId
      searchF.model.type = 1
    }
    const res = await endangerWarningApi.warningFirmPage(searchF)
    if(res.code == 0) {
      tabData.value = res.data.records || []
      pagenation.total = res.data.total
    }
  } catch (error) {}
  loading.value = false;
}

const disabledDateC = (current, data, type) => {
  if(!current || !data) {
    return false
  }
  return type == 'before' ? current < dayjs(data).endOf('day').subtract(1, 'day') : current > dayjs(data).endOf('day')
}

watch(() => props.orgId, (nval) => {
  if(nval) {
    getSearch()
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
